<template>
  <div class="center-bottom-wrap">
    <e-line :id="id()" :chartData="eLineChartData" />
    <Spin fix v-show="centerBottomChartLoading">加载中...</Spin>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { merge } from 'lodash'
import { eLineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('leakMonitoring')

export default {
  name: 'LeakMonitoringCenterBottom',
  components: {
    ELine: () => import('@/commons/charts/ELine')
  },
  computed: {
    ...mapState(['centerBottomChartLoading', 'eLineData']),
    id() {
      return nanoid
    },
    eLineChartData() {
      if (!this.eLineData) return null
      const _xAxisList = []
      const { date = [] } = this.eLineData
      for (let i = 0; i < date.length; i++) {
        _xAxisList.push(i + 1)
      }
      return merge({}, eLineOptions, {
        xAxis: {
          data: _xAxisList
        },
        series: [
          {
            type: 'line',
            data: date
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions([])
  }
}
</script>
<style lang="less" scoped>
.center-bottom-wrap {
  width: 100%;
  height: 100%;
}
</style>
